<template>
  <div id="app">
    <h3>App根组件</h3>
    <span>当前库存:</span>
    <input type="text" v-model.number="count">
    <my-add/>
    <my-sub/>
  </div>
</template>

<script>
import MyAdd from './components/MyAdd.vue'
import MySub from './components/MySub.vue'
export default {
  components: {
    MyAdd,
    MySub
  },
  computed: {
    // 完整写法 = get + set
    count: {
      get () {
        return this.$store.state.num
      },
      set (val) {
        // 拿到输入框的最新值，调用 setNum 这个mutation函数
        // 完成对num的赋值，总之，在vuex中，要想修改state，必须经过mutation
        // 直接使用mutation的语法，也可以映射用
        this.$store.commit('setNum', val)
      }
    }
  }
}
</script>

<style>
#app {
  width: 300px;
  margin: 100px auto;
}
</style>
